<!-- 新增/编辑指标 -->
<template>
  <a-drawer
    width="45%"
    :visible="props.visible"
    @ok="handleOk"
    @cancel="handleCancel"
    draggable
    title-align="center"
    unmountOnClose
  >
    <template #title> {{ props.data?.id ? '编辑指标' : '新增指标' }} </template>
    <div>
      <a-form
        :model="formData.data"
        ref="refForm"
        :rules="rules"
        auto-label-width
      >
        <a-form-item label="工作类型" field="type" show-colon>
          <a-select v-model="formData.data.type">
            <a-option :value="1">重点工作</a-option>
            <a-option :value="2">例行工作</a-option>
            <a-option :value="3">新增工作</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="工作计划项目" field="name" show-colon>
          <a-input v-model="formData.data.name"></a-input>
        </a-form-item>
        <a-form-item label="工作项目界定/描述" field="define" show-colon>
          <a-textarea
            v-model="formData.data.define"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item label="完成目标及时限要求" field="definition" show-colon>
          <a-textarea
            v-model="formData.data.definition"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>

        <a-form-item label="评价标准/规则" field="rule" show-colon>
          <a-textarea
            v-model="formData.data.rule"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item label="状态" field="" show-colon>
          <!-- <a-radio-group v-model="formData.data.status">
            <a-radio :value="1">启动</a-radio>
            <a-radio :value="2">停止</a-radio>
          </a-radio-group> -->
          <a-switch
            v-model="formData.data.status"
            :checked-value="1"
            :unchecked-value="2"
            size="medium"
          >
            <template #checked> 启动 </template>
            <template #unchecked> 停止 </template>
          </a-switch>
        </a-form-item>
      </a-form>
      <!-- <CountSetting v-model:visible="countSettingVisiable"></CountSetting> -->
    </div>
    <template #footer>
      <a-space>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确认</a-button>
        <a-button v-if="isShowContinueBtn" type="primary" @click="continueAdd"
          >确认并继续新增</a-button
        >
      </a-space>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash';
import { useAssessmentToolStore } from '@/store';
import CountSetting from '../CountSetting/index.vue';
import { PpiIndex } from '@/apis/management/performance/baseSetting/template/type';
import { GetPpiIndexRepeat } from '@/apis/management/performance/baseSetting/template';

const toolStore = useAssessmentToolStore();
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    data?: PpiIndex; // 传进来的数据,
  }>(),
  {}
);

const emits = defineEmits(['update:visible', 'ppiIndexEmit']);
let refForm = ref();
let countSettingVisiable = ref(false); // 是否设置计算公式弹出框
let isShowContinueBtn = ref(true); // 是否显示继续新增按钮
const formData = reactive<{ data: PpiIndex }>({
  data: {
    type: 1, // 工作类型
    name: '', // 工作计划项目
    define: '', // 工作项目界定、描述
    definition: '', // 完成目标及时限要求
    rule: '', // 评分标准
    status: 2
  }
});

// 原始数据
const originData = {
  type: undefined, // 工作类型
  name: '', // 工作计划项目
  define: '', // 工作项目界定、描述
  definition: '', // 完成目标及时限要求
  rule: undefined, // 评分标准
  weight: 0, // 指标权重
  dataSource: undefined, // 评分人（userid）
  personne: 1, // 评分人是否开启 1开 2否
  upper: 0, // 评分上限
  way: 1, // 评分方式 2非手动 1手动
  remark: '', // 备注
  personnel: 2 // 评分人是否开启0否1是
  // dimensionaId: '' // 维度id
};
/**
 * 查重
 */
const validateName = async (value: any, cb: any) => {
  if (value === props.data?.name) return;
  const res = await GetPpiIndexRepeat({
    name: value
  });
  if (res?.code === 400) {
    cb('名称已存在!');
  }
};
const rules = reactive({
  type: [
    {
      required: true,
      message: '请选择'
    }
  ],
  name: [
    {
      required: true,
      message: '请输入'
    },
    {
      validator: validateName
    }
  ],
  rule: [
    {
      required: true,
      message: '请输入'
    }
  ]
});

watch(
  () => props.visible,
  (newVal: boolean) => {
    // 如果是编辑，则赋值给formData
    if (newVal) {
      if (props.data) {
        formData.data = cloneDeep(props.data);
        isShowContinueBtn.value = false;
      } else {
        formData.data = cloneDeep(originData);
      }
    } else {
      isShowContinueBtn.value = true;
      formData.data = cloneDeep(originData);
    }
  }
);

const handleOk = async () => {
  if (await refForm.value.validate()) {
    return;
  }
  emits('ppiIndexEmit', cloneDeep(formData.data));
  emits('update:visible', false);
};

const continueAdd = async () => {
  if (await refForm.value.validate()) {
    return;
  }
  emits('ppiIndexEmit', cloneDeep(formData.data), true);
  emits('update:visible', true);
  formData.data = cloneDeep(originData);
};

const handleCancel = () => {
  emits('update:visible', false);
};
</script>

<style scoped lang="less">
.icon {
  cursor: pointer;
  font-size: 20px;
}
</style>
